<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>资源云-干饭大转盘</title>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/vue@2"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        a { text-decoration: none; }
        .checkbox-container { text-align: center; margin-top: 10px; }

        /* 样式化固定按钮的容器 */
        .fixed-button {
            position: fixed; /* 使用固定定位 */
            right: 30px; /* 距离页面右侧30px */
            display: flex; /* 使用flex布局来居中按钮 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            z-index: 1000; /* 确保按钮在其他内容之上 */
        }

        /* 样式化按钮 */
        .fixed-button button {
            background-color: #409EFF;
            color: white; /* 按钮文字颜色 */
            border: none; /* 移除边框 */
            padding: 15px 25px; /* 按钮内边距 */
            font-size: 16px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s ease, transform 0.3s ease; /* 过渡效果 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        /* 按钮悬停效果 */
        .fixed-button button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 稍微放大 */
        }

        /* 可选：为按钮添加活跃状态样式 */
        .fixed-button button:active {
            background-color: #004494; /* 按下时的背景色 */
            transform: scale(0.95); /* 稍微缩小 */
        }


        /* 样式可以根据需要调整 */
        #backToTopBtn {
            position: fixed; /* 固定定位 */
            bottom: 30px; /* 距离页面底部30px */
            right: 30px; /* 距离页面右侧30px */
            display: none; /* 默认隐藏，当页面滚动到一定位置时显示 */
            background-color: #409EFF;
            color: white;
            border: none;
            padding: 15px 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #backToTopBtn:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        #backToTopBtn:active {
            background-color: #004494;
            transform: scale(0.95);
        }
    </style>
</head>
<body>
<div id="app">
    <div id="top"></div>
    <el-container>
        <el-header>
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1">干饭大转盘</el-menu-item>
                <el-menu-item index="2"><a href="map.html" target="_blank">美食地图</a></el-menu-item>
                <el-menu-item index="3" disabled>虚拟主机</el-menu-item>
                <el-menu-item index="4"><a href="https://www.njtc.edu.cn/info/1023/37251.htm" target="_blank">了解社团</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-main >
            <div id="lottery">
                <br><br>
                <div id="my-lucky" style="width: 600px; height: 600px; margin: 0 auto;"></div>
                <br><br>
                <div class="checkbox-container">
                    <el-checkbox-group v-model="selectedOptions" @change="updatePrize">
                        <el-checkbox label="一食堂"></el-checkbox>
                        <el-checkbox label="二食堂"></el-checkbox>
                        <el-checkbox label="三食堂"></el-checkbox>
                        <el-checkbox label="四食堂" disabled></el-checkbox>
                        <div style="height: 20px"></div>
                        <el-checkbox label="奶茶"></el-checkbox>
                        <el-checkbox label="天街"></el-checkbox>
                        <el-checkbox label="市区" disabled></el-checkbox>
                        <el-checkbox label="二选一"></el-checkbox>
                        <el-checkbox label="三选一"></el-checkbox>
                    </el-checkbox-group>
                </div>
                <br>
                <div id="showResult" style="text-align: center; font-size: 25px;"></div>
                <div style="width: 70%;margin-left: auto;margin-right: auto">
                    <template>
                        <div>
                            <el-divider id="title"><i class="el-icon-s-data">&nbsp;&nbsp;用&nbsp;&nbsp;户&nbsp;&nbsp;评&nbsp;&nbsp;论</i></el-divider>
                            <div v-for="(item, index) in comments" :key="item.cid" >
                                <span>{{ item.text }}</span>
                                <el-divider content-position="right"> 🐼{{ item.name }} ——— 🕦{{ formatTime(item.time) }} </el-divider>
                            </div>
                        </div>
                    </template>
                    <div style="margin-left: auto;margin-right: auto;align-items: center;text-align: center">
                        <el-button   style="width: 100%" @click="showMore">*&nbsp;&nbsp;*&nbsp;&nbsp;*&nbsp;&nbsp;点&nbsp;&nbsp;击&nbsp;&nbsp;展&nbsp;&nbsp;开&nbsp;&nbsp;更&nbsp;&nbsp;多&nbsp;&nbsp;评&nbsp;&nbsp;论&nbsp;&nbsp;*&nbsp;&nbsp;*&nbsp;&nbsp;*</el-button>
                    </div>
                </div>
            </div>
        </el-main>

        <div class="fixed-button" style="bottom: 100px; right: 30px;"> <!-- 同样移除div的background-color属性 -->
            <button style="background-color: #67C23A;" @Click="comment">发表评论</button> <!-- 直接设置按钮的背景颜色 -->
        </div>

        <div class="fixed-button" style="bottom: 30px; right: 30px;"> <!-- 移除div的background-color属性，因为它会覆盖按钮的背景 -->
            <button @click="scrollToElement('top')" style="background-color: #409EFF;">回到顶部</button> <!-- 直接设置按钮的背景颜色 -->
        </div>
    </el-container>
</div>
</body>



<script src="https://unpkg.com/lucky-canvas@1.7.25"></script>

<script src="js/lottery.js"></script>



</html>